import React, {useMemo, useState} from 'react';
// useMemo起到的是将结果进行记忆。
// 第一个参数是一个函数，会将该函数运行，返回该函数运行的结果
// 第二个参数是一个数组，如果省略，useMemo无效（不会产生记忆）。
//     如果第二个参数是一个[],那么会产生记忆。
//     如果第二个参数是一个[arr],那么当arr引用地址发生变化会，会重新运行函数（传入的第一个参数），并产生记忆。
function App(props) {
    const [num,setNum] = useState(1);
    // 胡锐的一天
    const [arr,setArr] = useState([
        {
            id:1,
            thing:"买早点",
            money:-10
        },
        {
            id:2,
            thing:"扶老太太过马路",
            money:100
        },
        {
            id:3,
            thing:"去工地搬砖",
            money:10
        }
    ]);

    const count = useMemo(function(){
        console.log(11111);
        let n = 0;
        arr.forEach(v=>{
            n+=v.money;
        })
        return n;
    },[arr])

    return (
        <div>
            <button onClick={()=>{
                setNum(200);
            }}>{num}</button>
            <button onClick={()=>{
                setArr([
                    {
                      id:Date.now(),
                      thing:"请咱们吃大餐",
                      money:21000
                    },
                    ...arr
                ])
            }}>点我</button>
            <h3>班长的一天</h3>
            <h3>合计：￥{count.toFixed(2)}</h3>
            {
                arr.map(item=>(
                    <p key={item.id}>{item.thing}:￥{item.money.toFixed(2)}</p>
                ))
            }
            <h3>合计：￥{count.toFixed(2)}</h3>
        </div>
    );
}

export default App;